<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
<style>
	*{padding: 0;margin: 0;}
	#txt{width: 200px;height: 20px;}
	#List{ position: relative}
	li{ width: 200px;list-style-type: none;border:1px solid #ccc;border-top:none;font: 14px/28px"";}
	li:first-child{border-top: 1px solid #ccc;}
	.box{ width: 200px;height: 300px;background: #fff;position: absolute;left: 200px;top:0;display: none;border: 1px solid #000}
	li.active:hover .box{display: block;}
	li.active:hover{background: #ccc;}
	a{display: inline-block;border: 1px solid #ccc;margin:1px 2px;font:16px/40px "";text-decoration: none;
	   color: #000;text-align: center;}
</style>
	</head>
	<body>
	<input type="text" id="txt">
	<ul id="List"></ul>
	</body>
	<script type="text/javascript">
	var txt =document.getElementById("txt");
    var oUl =document.getElementById("List");
		function jsonp756(res) {
		    var str ="";
		    document.write(res);
			for( var  i in res.result){
			    str+=` <li>${ res.result[i][0]}</li>`
			}
            oUl.innerHTML=str;
			var str2="";
            for(var i in res.result){
                var str2=`<h3>${res.result[i][0]}</h3>`
                for(var j in res.magic){
                    if(i==res.magic[j].index-1){
                        var box =document.createElement('div')
                        oUl.children[i].className="active"
                        oUl.children[i].appendChild(box);
                        box.className='box';
                        for( var k in res.magic[j].data){
                            for( var n in res.magic[j].data[k]){
                                console.log(res)
                                str2+=`<a href="#">${res.magic[j].data[k][n].title}</a>`
							}
                            str2+=`<br/>`;
                            box.innerHTML=str2;
						}
                        
                    }
                }
            }
          //  var Ac = document.getElementsByClassName("active");
		  // console.log(Ac);
			/*oUl.onmouseover=function (e) {
				var e= e ||event;

                if(e.target.tagName.toLowerCase()=="li",e.target.className.toLowerCase()=="active"){
                    box.className='box';
                    box.style.display='block';
                    for(let i=0;i<Ac.length;i++){
                        Ac[i].onmouseout=function () {
                            Ac[i].children[0].style.display='none';
                        }
					}

				}
            }*/




        }
		txt.oninput=function () {
            var search = txt.value;
            console.log(search)
            var url = 'https://suggest.taobao.com/sug?code=utf-8&q='+search+'&_ksTS=1509440295971_755&callback=jsonp756&k=1&area=c2c&bucketid=3'
            var sc = document.createElement("script");
            sc.src=url;
            document.body.appendChild(sc);
            sc.remove();
        }

	</script>
</html>
